<template>
    <div class="store-info">
        <van-cell-group title="商户信息">
            <van-cell title="商户性质" :clickable="false">
                <template #right-icon>
                    <radio-group v-model="formData.merchantProperty" direction="horizontal">
                        <radio name="4" shape="square">个人</radio>
                        <radio name="1" shape="square">企业/个体户</radio>
                    </radio-group>
                </template>
            </van-cell>
            <van-field v-model="formData.name" label="商户名称" placeholder="请输入商户名称" input-align="right" />
            <van-field v-model="formData.shortName" label="商户简称" placeholder="请输入商户简称" input-align="right" />
            <van-cell title="商户经营范围" is-link clickable :value="merchantTypeName" @click="$refs.merchantType.showPicker()" />

            <van-cell title="所在地区" is-link clickable :value="regionName" @click="$refs.addressPickerRef.showPicker()" />
            <van-field label="详细地址" v-model="formData.address" placeholder="请输入详细地址" input-align="right" />
            <van-field v-model="formData.email" label="邮箱" placeholder="请输入邮箱地址" input-align="right" />
        </van-cell-group>
        <!--  -->
        <van-cell-group title="补充信息" v-if="formData.merchantProperty == '1'">
            <van-field label="统一社会信用代码" v-model="formData.licenseNo" placeholder="请输入统一社会信用代码" input-align="right" />
            <van-field label="企业法人" v-model="formData.legalPerson" placeholder="请输入企业法人" input-align="right" />
        </van-cell-group>
        <!--  -->
        <van-cell-group title="营业执照(选填)">
            <div class="img_con">
                <upload-img desc="营业执照" :imgUrl.sync="formData.licensePicture" fileType="005"></upload-img>
            </div>
        </van-cell-group>
        <van-cell-group title="商户门头(选填)">
            <div class="img_con">
                <upload-img desc="商户门头" :imgUrl.sync="formData.shopPicture" fileType="007"></upload-img>
            </div>
        </van-cell-group>
        <van-cell-group title="纸质协议(选填)">
            <div class="img_con">
                <upload-img desc="纸质协议" :imgUrl.sync="formData.agreementPicture" fileType="008"></upload-img>
            </div>
        </van-cell-group>
        <van-cell-group title="店铺环境(选填)">
            <upload-img-list showName="店铺环境" :maxCount="3" ref="storeImgListRef" fileType="006"></upload-img-list>
        </van-cell-group>

        <!-- <van-cell-group title="营业执照相关" v-if="formData.merchantProperty == '1'">
            <van-field v-model="formData.licenseNo" label="营业执照号" placeholder="请输入营业执照号" input-align="right" />
            <van-field v-model="formData.legalPerson" label="法人姓名" placeholder="请输入营业执照法人姓名" input-align="right" />
            <van-cell title="开始日期" is-link clickable :value="formData.licenseStartDate || '点击选择'" @click="$refs.timeStart.show()" />
            <van-cell title="结束日期" is-link clickable :value="formData.licenseEndDate || '点击选择'" @click="$refs.timeEnd.show()" />
        </van-cell-group> -->

        <!-- --------------------------------- -->

        <!-- picker -->
        <common-picker ref="addressPickerRef" title="省市区" :columns="baseData.storeDic.regionList" @commit="addressPicker"></common-picker>
        <common-picker ref="merchantType" title="商户经营范围" :columns="baseData.storeDic.merchantTypeList" @commit="pickerCommit($event)"></common-picker>
        <!--  -->
        <!-- <time-picker ref="timeStart" @commit="timeCommit($event,'licenseStartDate')"></time-picker> -->
        <!-- <time-picker ref="timeEnd" @commit="timeCommit($event,'licenseEndDate')"></time-picker> -->

    </div>
</template>

<script>

import { mapState } from "vuex"
import CommonPicker from "@/components/picker/common-picker"
import pickerData from "@/utils/pickerData"

import UploadImg from "@/components/form/upload-img"
import UploadImgList from "@/components/form/upload-img-list"
// import TimePicker from "@/components/picker/timePicker"
import { RadioGroup, Radio } from 'vant';

export default {
    components: { CommonPicker, UploadImg, UploadImgList, RadioGroup, Radio },

    filters: {},

    data() {
        return {
            formData: {
                name: "", // 店铺名称
                shortName: "",// 商户店铺简称	
                merchantProperty: "4", // 商户性质
                merchantType: "", // 商户经营范围

                provinceCode: "", // 省
                cityCode: "", // 市
                countyCode: "", // 区
                provinceName: "",// 省
                cityName: "",// 市
                countyName: "",// 区
                address: "", // 详细地址
                email: "", // 邮箱

                shopPicture: "", // 店铺门头照片	
                agreementPicture: "", // 纸质协议照片地址	
                licensePicture: "",// 营业执照图片地址
                shopPictures: [], // 店铺照片地址集合

                // regionCode: "", // 商户地区码
                licenseNo: "", // 营业执照号
                legalPerson: "", // 营业执照法人姓名	
                // licenseStartDate: "", // 营业执照开始日期	
                // licenseEndDate: "", // 营业执照截止日期,
            },
            merchantTypeName: "请选择", // 商户经营范围
            pickerData: pickerData,
            // 
            showLicenseStartDate: false,
        }
    },

    mounted() {
        this.prepareData();
    },

    computed: {
        ...mapState({
            baseData: state => state.baseData,
            custInfo: state => state.homeData.custInfo,
        }),

        regionName() {
            if (!this.formData.provinceName) {
                return "请选择"
            } else {
                return `${this.formData.provinceName}-${this.formData.cityName}-${this.formData.countyName}`
            }
        },
    },

    methods: {

        prepareData() {
            if (['01', '02', '03'].indexOf(this.custInfo.merchantStatus) === -1) {
                return;
            }
            this.$http.collectionBaseInfo(this.custInfo.merchantCode).then((result) => {
                if (result === false) {
                    return false;
                }
                this.formData = result;
                // 返显图片列表
                this.$refs.storeImgListRef.setList(result.shopPictures);
                this.merchantTypeName = `${this.formData.merchantTypeParentName}-${this.formData.merchantTypeName}`
            });
        },

        pickerCommit(sltObj) {
            this.merchantTypeName = sltObj.showText;
            this.formData.merchantType = sltObj.code[sltObj.code.length - 1];
        },

        // 省市区
        addressPicker(e) {
            const code = e.code;
            this.formData.provinceCode = code[0];
            this.formData.cityCode = code[1];
            this.formData.countyCode = code[2];

            let _array = e.showText.split("-");
            this.formData.provinceName = _array[0];// 省
            this.formData.cityName = _array[1];// 市
            this.formData.countyName = _array[2];// 区

        },

        timeCommit(e, key) {
            this.formData[key] = e;
        },

        // 表单提交钩子
        submitForm() {
            let shopPictures = this.$refs.storeImgListRef.getList();
            const formData = {
                ...this.formData,
                shopPictures,
                merchantCode: this.custInfo.merchantCode, // 商户号
            };
            return formData;
        }
    }

};
</script>

<style lang="scss" scoped>
.store-info {
    width: 100%;
    .img_con {
        // padding: 10px;
    }
}
</style>
